import { useState } from "react";

export enum DanmuMsgTypeEnum {
  danmu,
  otherJoin,
  userLeaved,
}

const noticeMap = {
  [DanmuMsgTypeEnum.danmu]: { title: "", subtitle: "" },
  [DanmuMsgTypeEnum.otherJoin]: { title: "系统通知：", subtitle: "进入直播！" },
  [DanmuMsgTypeEnum.userLeaved]: {
    title: "系统通知：",
    subtitle: "离开直播！",
  },
};

const Home: React.FC<{ roomId: string }> = (props) => {
  const [roomNoLive, setRoomNoLive] = useState(false);
  const [liveUserList, setLiveUserList] = useState([
    { name: "鲜花", ico: "", price: "免费" },
    { name: "肥宅水", ico: "", price: "2元" },
    { name: "小鸡腿", ico: "", price: "3元" },
    { name: "大鸡腿", ico: "", price: "5元" },
    { name: "一杯咖啡", ico: "", price: "10元" },
  ]);

  return (
    <div className="push-wrap">
      {roomNoLive ? (
        <span>当前房间没在直播</span>
      ) : (
        <span>
          <Left props={{ roomId: props.roomId, liveUserList }} />
          <Right
            props={{
              roomId: props.roomId,
              damuList: [],
              noticeMap,
              title: "我很好",
            }}
          />
        </span>
      )}
    </div>
  );
};

const Left = (props: any) => {
  return (
    <div className="left">
      <div className="video-wrap">
        <video
          id="localVideo"
          autoplay
          webkit-playsinline="true"
          playsinline
          x-webkit-airplay="allow"
          x5-video-player-type="h5"
          x5-video-player-fullscreen="true"
          x5-video-orientation="portraint"
          muted
          controls
        ></video>
        <div v-if="currMediaTypeList.length <= 0" className="add-wrap">
          <div className="item" onClick={startGetUserMedia}>
            摄像头
          </div>
          <div className="item" onClick={startGetDisplayMedia}>
            窗口
          </div>
        </div>
      </div>
      <div className="control">
        <div className="info">
          <div className="avatar"></div>
          <div className="detail">
            <div className="top">
              <input v-model="roomName" type="text" placeholder="输入房间名" />
              <button className="btn" onClick={confirmRoomName}>
                确定
              </button>
            </div>
            <div className="bottom">
              <span>socketId：{getSocketId()}</span>
            </div>
          </div>
        </div>
        <div className="other">
          <div className="top">
            <span className="item">
              <i className="ico"></i>
              <span>正在观看人数：{props?.liveUserList?.length}</span>
            </span>
          </div>
          <div className="bottom">
            <button onClick={startLive}>开始直播</button>
            <button onClick={endLive}>结束直播</button>
          </div>
        </div>
      </div>
    </div>
  );
};

const Right = (props: any) => {
  return (
    <div className="right">
      <div className="resource-card">
        <div className="title">素材列表 {props.props.title}</div>
        <div className="list">
          {props?.currMediaTypeList?.map((item: any) => (
            <div className="item">
              <span className="name">{item.txt}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="danmu-card">
        <div className="title">弹幕互动</div>
        <div className="list-wrap">
          <div className="list">
            {props?.danmuList?.map((item: any) => (
              <div className="item">
                <div>
                  <span className="name">
                    {noticeMap[item.msgType].title || item.socketId}：
                  </span>
                  <span className="msg">
                    {noticeMap[item.msgType].subtitle}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="send-msg">
          <input v-model="danmuStr" className="ipt" />
          <div className="btn" onClick={sendDanmu}>
            发送
          </div>
        </div>
      </div>
    </div>
  );
};

const getSocketId = () => {
  return "";
};

const sendDanmu = () => {};

const startLive = () => {};
const endLive = () => {};
const confirmRoomName = () => {};
const startGetDisplayMedia = () => {};
const startGetUserMedia = () => {};

export default Home;
